<!-- 获取老师电话号码等信息 -->
<template>
	<div id="teacher" class="app">
		<!-- 搜索组件 -->
		<mt-search 
			v-model="name"
			:autofocus="autofocus"
			:show="show"
			placeholder="请输入老师名字"
			@keyup.enter.native="searchFn"
			class="search_bar"
		>
			<mt-cell
				v-for="item in info"
				:title="item.title"
				:value="item.value"
			>
			</mt-cell>
		</mt-search>
	</div>
</template>

<script>
import Vue from 'vue'
import { Search } from 'mint-ui';
import { Cell } from 'mint-ui';
import { Indicator } from 'mint-ui';

Vue.component('mt-cell', Cell);
Vue.component('mt-search', Search);

export default {
	name: 'teacher',
	//首页一开始更改title
	created : function(){
		this.$store.commit({
			type : 'changeTitleFn',
			title : '查找老师'
		});
	},
	data () {
		return {
		 	name : "",
		 	autofocus : true,
		 	show : true,
		 	info : {
		 		num : { title : "工号", value : "" },
		 		name : { title : "姓名", value : "" },
		 		phone : { title : "电话", value : "" }
		 	}
		}
	},
	computed : {
		// 通过判断 store 中refreshName值等于当前路径 / 就刷新
		// 这里的刷新不重新获取数据，而是将值清空
		calcRefresh(newVal,oldVal){
			if(this.$store.state.refreshName == '/teacher'){
				// 将 refreshName 重新设置为 空
				this.$store.commit({
					type : 'changeRefreshName',
					refreshName :''
				})
				// 设置值为空
				this.name = '';
				Object.keys(this.info).sort().forEach((value,) => {
					this.$set((this.info)[value], "value", "")
				})
			}
		}
	},
	//需要watch一下才能够获取到值，不知道为什么
	watch : {
		calcRefresh(){}
	},
	methods : {
		searchFn(){
			this.$store.dispatch({
				type : 'getData',
				url : 'http://qietu.wenye123.com/test_mysise/curl.php?method=teacher&&name=' + this.name,
				callBack :(data)=>{
					if( data.code==200 && data.msg=='success'){
						// 获取老师数据
						let info = data.resData;
						for(let key in info) {
							this.$set((this.info)[key], 'value', info[key])
						}
					} else if (data.code == 404 && data.msg == "failed") {
						for(let key in this.info) {
							this.$set((this.info)[key], 'value',"没有这个用户")
						}
					}
				}
			})
		},
	}
}
</script>

<style>
	#teacher {
		
	}
	/*解决搜索栏遮盖导航栏问题*/
	#teacher .mint-search {
		width: 100vw;
		z-index: 0;
		position: absolute;
		top: 0;
		left : 0;
	}
	
</style>